<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Notifications Flyout Menu - 弹出通知栏</title>
<style type="text/css">
	.w {
		width: 900px;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	
	.flyout {
		width: 310px;
		margin-top: 10px;
		font-size: 11px;
		position: relative;
		font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
		background-color: white;
		padding: 9px 11px;
		background: rgba(255, 255, 255, 0.9);
		border: 1px solid #c5c5c5;
		-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
		-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
		box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}

	.flyout #tip {
		background-image: url('http://demo.hongkiat.com/css3-box-shadows-effects/images/tip.png');
		background-repeat: no-repeat;
		background-size: auto;
		height: 11px;
		position: absolute;
		top: -11px;
		left: 25px;
		width: 20px;
	}

	.flyout h2 {
		text-transform: uppercase;
		color: #666;
		font-size: 1.2em; 
		padding-bottom: 5px;
		margin-bottom: 12px;
		border-bottom: 1px solid #dcdbda;
	}
	.flyout p { padding-bottom: 25px; font-size: 1.1em; color: #222; }
</style>
</head>
<body screen_capture_injected="true">
	<div class="w">
		<h1>#04 Notifications Flyout Menu</h1>
		
		<div class="flyout">
			<span id="tip"></span>
			<h2>Notifications</h2>
			<p>No new notifications!</p>
		</div>
	</div>
</body>
</html>